<template>
    <div class="setComponent">
        <div class="form-item">
            <label>卡片列数</label>
            <el-select v-model="obj.columns" placeholder="请选择">
                <el-option
                    v-for="item in columnOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
            </el-select>
        </div>
        <div class="form-item">
            <label>间距设置</label>
            <el-button type="primary" round size="mini" @click="paddingClick">设置</el-button>
        </div>
        <div class="form-item">
            <label>增加卡片</label>
            <el-button type="primary" round size="mini" @click="addClick">增加</el-button>
        </div>
        <div class="form-item">
            <label>删除卡片</label>
            <el-button :disabled="obj.imgTextBox.length<=1" type="danger" round size="mini" @click="removeClick">删除</el-button>
        </div>

        <div class="form-item">
            <label>大标题</label>
            <el-button size="mini" @click="butClick(['title', obj.title])">编辑</el-button>
        </div>
        <div class="form-item">
            <label>大标题描述</label>
            <el-button size="mini" @click="butClick(['title', obj.desc])">编辑</el-button>
        </div>
        <div class="form-item">
            <label>卡片标题</label>
            <el-button size="mini" @click="titleClick('title')">编辑</el-button>
        </div>
        <div>
            <div class="form-item">
                <label>卡片描述</label>
                <el-button size="mini" @click="titleClick('desc')">编辑</el-button>
            </div>
        </div>
        <div class="form-item">
            <label>卡片图片</label>
            <el-button size="small" type="primary" @click="uploadClick">上传图片</el-button>
        </div>
        <div class="form-item">
            <label>卡片动画</label>
            <el-select v-model="obj.animateImg" clearable placeholder="请选择">
                <el-option-group
                    v-for="(group,i) in options"
                    :key="i"
                    :label="group.label">
                    <el-option
                        v-for="(item,itemIndex) in group.options"
                        :key="itemIndex"
                        :label="item.label"
                        :value="item.value"/>
                </el-option-group>
            </el-select>
        </div>

    </div>
</template>
<script>
import { animateOptions } from '@/utils/animateOptions'
import { columnOptions, directionOptions } from '@/utils/selectOptions'
export default {
    name: 'ThreeColumns',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            options: animateOptions,
            columnOptions: columnOptions,
            directionOptions: directionOptions
        }
    },
    methods: {
        butClick(msg) {
            this.$emit('butClick', msg)
        },
        uploadClick() {
            this.$emit('uploadClick', this.obj)
        },
        addClick() {
            this.obj.imgTextBox.push(JSON.parse(JSON.stringify(this.obj.imgTextBox[0])))
        },
        removeClick() {
            this.obj.imgTextBox.pop()
        },
        titleClick(type) {
            this.$emit('titleClick', [this.obj, type])
        },
        paddingClick() {
            this.$emit('paddingClick', this.obj)
        }
    }
}
</script>
<style lang="scss">

</style>

